<template>
  <div>
    <el-row>
       满足条件人数：{{tableData.total}}
    </el-row>
    <el-row>
      <el-table :data="tableData.list" border>
        <el-table-column label="VIP等级" prop="vipLevel" align="center">
        </el-table-column>
        <el-table-column label="满足人数" prop="num" align="center">
        </el-table-column>
        <el-table-column label="用户详情" prop="names" align="center">
          <template slot-scope="{ row }">
            <el-button v-if="roleCheck('read-user-detail')" type="primary" @click="showNames(row)">查看</el-button>
            <el-button v-else type="info" disabled>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog :visible.sync="dialogFlag" width="30%" title="用户详情">
      <div>{{names}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFlag = false">取 消</el-button>
        <el-button type="primary" @click="dialogFlag = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getJackpotList, getJackpotListDetail } from '@/services/api/activity';
import getCommand from '@/mixins/getCommand';

export default {
  name: 'assignJackpot',
  mixins: [getCommand],
  data() {
    return {
      awardAmount: undefined,
      tableData: {
        list: [],
        total: 0,
      },
      sendAwardDialogFlag: false,
      dialogFlag: false,
      names: undefined,
      userDetail: undefined,
      filters: {
        vipLevel: undefined,
      },
    };
  },
  mounted() {
    this.bindGet(getJackpotList, 'tableData', {
      action: 'getJackpotList',
      format: (data) => {
        let sum = 0;
        _.each(data, (item) => {
          sum += item.num;
        });
        return { total: sum, list: data };
      },
    });
    this.bindGet(getJackpotListDetail, 'userDetail', {
      action: 'getJackpotListDetail',
      sendingData: 'filters',
      callback: ([result, data]) => {
        if (result) {
          this.names = data;
          this.dialogFlag = true;
        }
      },
    });
    this.doGet({ action: 'getJackpotList' });
  },
  methods: {
    showNames({ vipLevel }) {
      this.filters.vipLevel = vipLevel;
      this.doGet({ action: 'getJackpotListDetail' });
    },
  },
};
</script>

<style scoped>
  .fr {
    float: right;
  }

  .awardAmount-input {
    width: auto !important;
  }

  .el-row {
    margin-top: 20px;
    margin-bottom: 30px;
  }
</style>
